<template>
  <view class="page">
    <!-- 顶部食堂切换 -->
    <view class="top-contain">
      <u-tabs
          class="top1"
          :list="canteenList"
          :current="currentCanteen"
          @change="onCanteenChange"
          lineColor="#3c9cff"
          activeStyle="color:#3c9cff;font-weight:bold"
      ></u-tabs>

      <!-- 周一到周日切换 -->
      <u-tabs
          class="top2"
          :list="weekList"
          :current="currentDay"
          @change="onDayChange"
          lineColor="#ff9900"
          activeStyle="color:#ff9900;font-weight:bold"
      ></u-tabs>
    </view>


    <scroll-view scroll-y class="menu-scroll">
      <view v-for="(meal, mIdx) in todayMenu.meals" :key="mIdx" class="meal-section">
        <view class="meal-title">{{ meal.type }}（副食{{ meal.voteLimit[0] }}选{{ meal.voteLimit[1] }}）</view>

        <view v-for="(category, cIdx) in meal.categories" :key="cIdx">
          <view class="category-title">{{ category.name }}</view>
          <u-grid :col="2" :border="false">
            <u-grid-item
                v-for="(dish, dIdx) in category.dishes"
                :key="dIdx"
                class="dish-card"
            >
              <image :src="dish.img" mode="aspectFill" class="dish-img" @click="previewImage(dish.img)"/>
              <view class="dish-info">
                <text class="dish-name">{{ dish.name }}</text>
                <text class="dish-vote">{{ dish.votes }}票 ({{ dish.percent }}%)</text>
              </view>
              <!-- 副食可投票 -->
              <u-checkbox
                  v-if="category.type === '副食'"
                  :label="dish.name"
                  v-model="dish.selected"
                  @change="onVoteChange(meal, category)"
              ></u-checkbox>
            </u-grid-item>
          </u-grid>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
import {ref, computed} from 'vue'

interface Dish {
  name: string
  img: string
  votes: number
  percent: number
  selected?: boolean
}

interface Category {
  name: string
  type?: string // 判断副食是否投票
  dishes: Dish[]
}

interface Meal {
  type: string
  voteLimit: [number, number] // [总数, 可选数]，如[4,2]
  categories: Category[]
}

const canteenList = ref([{name: '一食堂'}, {name: '二食堂'}, {name: '三食堂'}])
const currentCanteen = ref(0)

const weekList = ref([
  {name: '周一'}, {name: '周二'}, {name: '周三'},
  {name: '周四'}, {name: '周五'}, {name: '周六'}, {name: '周日'}
])
const currentDay = ref(0)

// 模拟数据
const menuData = ref({
  0: { // 食堂ID
    0: { // 周一
      meals: [
        {
          type: '早餐',
          voteLimit: [4, 2],
          categories: [
            {
              name: '主食',
              dishes: [
                {name: '包子', img: '/static/baozi.jpg', votes: 12, percent: 30},
                {name: '油条', img: '/static/youtiao.jpg', votes: 28, percent: 70}
              ]
            },
            {
              name: '副食',
              type: '副食',
              dishes: [
                {name: '豆浆', img: '/static/doujiang.jpg', votes: 15, percent: 50, selected: false},
                {name: '咸菜', img: '/static/xian_cai.jpg', votes: 15, percent: 50, selected: false},
                {name: '小菜', img: '/static/xiaocai.jpg', votes: 10, percent: 33, selected: false},
                {name: '特色菜', img: '/static/tesecai.jpg', votes: 20, percent: 67, selected: false}
              ]
            }
          ]
        },
        {
          type: '午餐',
          voteLimit: [6, 3],
          categories: [
            {
              name: '主食',
              dishes: [
                {name: '米饭', img: '/static/rice.jpg', votes: 33, percent: 80},
                {name: '馒头', img: '/static/mantou.jpg', votes: 8, percent: 20}
              ]
            }
          ]
        }, {
          type: '晚餐',
          voteLimit: [6, 3], // 副食6选3
          categories: [
            {
              name: '主食',
              dishes: [
                {name: '米饭', img: '/static/rice.jpg', votes: 20, percent: 50},
                {name: '馒头', img: '/static/mantou.jpg', votes: 20, percent: 50}
              ]
            },
            {
              name: '副食',
              type: '副食',
              dishes: [
                {name: '红烧鸡', img: '/static/chicken.jpg', votes: 15, percent: 25, selected: false},
                {name: '炒青菜', img: '/static/vegetable.jpg', votes: 30, percent: 50, selected: false},
                {name: '特色菜', img: '/static/tesecai.jpg', votes: 15, percent: 25, selected: false}
              ]
            },
            {
              name: '冷菜',
              dishes: [
                {name: '凉拌黄瓜', img: '/static/cucumber.jpg', votes: 20, percent: 50},
                {name: '凉拌豆腐', img: '/static/tofu.jpg', votes: 20, percent: 50}
              ]
            },
            {
              name: '羹汤',
              dishes: [
                {name: '紫菜汤', img: '/static/soup.jpg', votes: 30, percent: 75},
                {name: '鸡蛋汤', img: '/static/eggsoup.jpg', votes: 10, percent: 25}
              ]
            },
            {
              name: '饮品',
              dishes: [
                {name: '豆浆', img: '/static/doujiang.jpg', votes: 25, percent: 50},
                {name: '果汁', img: '/static/juice.jpg', votes: 25, percent: 50}
              ]
            },
            {
              name: '水果',
              dishes: [
                {name: '苹果', img: '/static/apple.jpg', votes: 20, percent: 50},
                {name: '香蕉', img: '/static/banana.jpg', votes: 20, percent: 50}
              ]
            }
          ]
        }
      ]
    }
  }
})

const todayMenu = computed(() => menuData.value[currentCanteen.value]?.[currentDay.value] || {meals: []})

function onCanteenChange(index: number) {
  currentCanteen.value = index
}

function onDayChange(index: number) {
  currentDay.value = index
}

function previewImage(url: string) {
  uni.previewImage({urls: [url]})
}

// 投票限制处理
function onVoteChange(meal: Meal, category: Category) {
  const selectedCount = category.dishes.filter(d => d.selected).length
  const max = meal.voteLimit[1]
  if (selectedCount > max) {
    // 超出限制，取消最后选择
    const last = [...category.dishes].reverse().find(d => d.selected)
    if (last) last.selected = false
    uni.showToast({title: `最多选择${max}个副食`, icon: 'none'})
  }
}
</script>

<style scoped lang="scss">
.page {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.top-contain {

}

.top1 .top2 {

}

.menu-scroll {
  flex: 1;

}

.meal-section {
  margin: 0 30rpx 30rpx;
}

.meal-title {
  font-size: 32rpx;
  font-weight: bold;
  margin: 10rpx 0;
}

.category-title {
  font-size: 28rpx;
  margin: 10rpx 0;
  color: #666;
}

.dish-card {
  background: #fff;
  border-radius: 12rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
  margin-bottom: 20rpx;
}

.dish-img {
  width: 100%;
  height: 160rpx;
}

.dish-info {
  padding: 10rpx;
  text-align: center;
}

.dish-name {
  display: block;
  font-size: 28rpx;
  font-weight: 500;
}

.dish-vote {
  font-size: 24rpx;
  color: #888;
}
</style>
